<template>
	<div class="uiue-card">
		<div class="tit">附件</div>
		<a-form ref="formRef" :model="formData" :rule="formRules" layout="vertical" class="form-box">
			<a-row>
				<a-col :span="8">
					<a-form-item name="planeFile">
						<template v-slot:label>
							<div class="labelCla">项目计划书</div>
						</template>
						<a-upload
							v-model:file-list="fileList1"
							:accept="fileType"
							:customRequest="customRequest"
							@change="planeFileChange"
							@remove="remove"
						>
							<a-button>
								<upload-outlined></upload-outlined>
								上传文件
							</a-button>
							<div class="font">支持扩展名：{{ fileType }}</div>
						</a-upload>
					</a-form-item>
				</a-col>
				<a-col :span="8" :offset="8">
					<a-form-item name="testResFile">
						<template v-slot:label>
							<div class="labelCla">测试环境结果</div>
						</template>
						<a-upload
							v-model:file-list="fileList2"
							:accept="fileType"
							:customRequest="customRequest"
							@change="testResFileChange"
							@remove="remove"
						>
							<a-button>
								<upload-outlined></upload-outlined>
								上传文件
							</a-button>
							<div class="font">支持扩展名：{{ fileType }}</div>
						</a-upload>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="8">
					<a-form-item name="networkConnFile">
						<template v-slot:label>
							<div class="labelCla">网络打通结果</div>
						</template>
						<a-upload
							v-model:file-list="fileList3"
							list-type="picture"
							class="upload-list-inline"
							:accept="fileImgType"
							:customRequest="customRequest"
							@change="networkConnFileChange"
							@remove="remove"
						>
							<div class="uploadBtn">
								<plus-outlined />
								<div class="ant-upload-text">上传图片</div>
							</div>
							<div class="font">支持扩展名：{{ fileImgType }}</div>
						</a-upload>
					</a-form-item>
				</a-col>
				<a-col :span="8" :offset="8">
					<a-form-item name="appStoreImgFile">
						<template v-slot:label>
							<div class="labelCla">应用商店截图</div>
						</template>
						<a-upload
							v-model:file-list="fileList4"
							list-type="picture"
							class="upload-list-inline"
							:accept="fileImgType"
							:customRequest="customRequestStroe"
							@change="appStoreImgFileChange"
							@remove="remove"
						>
							<div class="uploadBtn">
								<plus-outlined />
								<div class="ant-upload-text">上传图片</div>
							</div>
							<div class="font">支持扩展名：{{ fileImgType }}</div>
						</a-upload>
					</a-form-item>
				</a-col>
			</a-row>
			<div class="tit1">需上传的附件为：</div>
			<div class="tit2">
				1.项目计划书：《项目计划书--XXX应用》，《项目需求说明书--XXX应用》2.测试结果：《安全扫描报告--XXX应用》3.网络结果：应用服务器与移动端服务器访问成功截图，应用服务器与门户端服务器访问成功截图4.应用截图：应用移动端使用界面3张截图；
			</div>
			<div class="tit2">
				{{ str }}
			</div>
		</a-form>
	</div>
</template>

<script setup name="AnnexForm">
import fileApi from '@/api/dev/fileApi'
import { message } from 'ant-design-vue'
const fileType = '.doc,.docx,.xlsx,.xls,.pdf,.zip,.rar,.ppt,.pptx'
const fileImgType = '.jpg,.png,.jpeg'
const fileUrl = import.meta.env.VITE_FILE_URL
const currentName = inject('currentName')
const tableName = inject('tableName')

const str = computed(() => {
	let strss =
		currentName?.value === '提交上线材料'
			? '需要补充材料：2.测试结果：《智慧门户测试环境应用上线测试报告》、《智慧门户生产环境应用上线测试报告》、《智慧门户测试环境应用变更测试报告》、《智慧门户生产环境应用变更测试报告》、《联通办公测试环境应用灰度测试报告--XXX应用》、《联通办公生产环境应用灰度测试报告--XXX应用》、《联通办公测试环境应用上线测试报告--XXX应用》、《联通办公生产环境应用上线测试报告--XXX应用》、《安扫报告--XXX应用》《联通办公测试环境应用变更测试报告--XXX应用》、《联通办公生产环境应用变更测试报告--XXX应用》4.应用截图：应用内部带有应用联系人界面截图、应用内部带有返回移动端按钮界面截图、应用内部带有胶囊位界面截图、网络支持HTTP协议1.1版本的界面截图、应用具备待办待阅功能截图'
			: ''
	return strss
})
const formRef = ref()

// 表单数据
const formData = reactive({
	planeFile: [], // 项目计划书
	testResFile: [], // 测试环境结果
	networkConnFile: [], // 网络打通结果
	appStoreImgFile: [] // 应用商店截图
	// appShortName: [] // 应用商店截图
})
const rules = [{ required: true, message: '请上传变更资料', trigger: 'blur' }]
// 默认要校验的
const formRules = reactive({
	appStoreImgFile: [{ required: true, message: '请上传应用商店截图', trigger: 'blur' }]
})
const fileList1 = ref([])
const fileList2 = ref([])
const fileList3 = ref([])
const fileList4 = ref([])
const fileList5 = ref([])

/*变更编辑  开始*/
const editDate = inject('editDate')
const fileHandle = (fileList) => {
	const file = fileList ? JSON.parse(fileList) : []
	file.map((item) => {
		if (item.url) {
			item.url = item.url.includes('http') ? item.url : `${fileUrl}/${item.url}`
		} else {
			// old
			item = `${fileUrl}/${item}`
		}
		return item
	})
	return file
}
// if (editDate.value) {
// 	if (editDate.value.planeFile) fileList1.value = fileHandle(editDate.value.planeFile)
// 	if (editDate.value.testResFile) fileList2.value = fileHandle(editDate.value.testResFile)
// 	if (editDate.value.networkConnFile) fileList3.value = fileHandle(editDate.value.networkConnFile)
// 	// 存量里面脏数据 无法判断
// 	if (editDate.value.appStoreImgFile) fileList4.value = fileHandle(editDate.value.appStoreImgFile)

// 	Object.keys(formData).forEach((key) => {
// 		formData[key] = editDate.value[key] ? JSON.parse(editDate.value[key]) : []
// 	})
// }

/*变更编辑  结束*/
// const beforeUpload = file => {
//     console.log(file)
//     //   fileList.value = [...fileList.value, file];
//     return false;
// };
const appShortNameFileChange = (info) => {
	handleChange(info, 'appShortName')
}
const planeFileChange = (info) => {
	handleChange(info, 'planeFile')
}
const testResFileChange = (info) => {
	handleChange(info, 'testResFile')
}
const networkConnFileChange = (info) => {
	handleChange(info, 'networkConnFile')
}
const appStoreImgFileChange = (info) => {
	handleChange(info, 'appStoreImgFile')
}
const handleChange = (info, key) => {
	const { response, name, status, url } = info.file
	// console.log(info.file)
	// 添加
	if (status === 'done') {
		if (response) {
			formData[key].push({
				name,
				url: response
			})
		}
	}
	// 删除
	if (status === 'removed') {
		let index
		if (response) {
			// 删除刚上传的
			index = formData[key].findIndex((item) => response === item.url)
		} else {
			// 删除后台返回的已经上传的
			index = formData[key].findIndex((item) => url.includes(item.url))
		}
		if (index > -1) {
			formData[key].splice(index, 1)
		}
	}
}
const props = defineProps({
	isup: {
		type: Boolean
	}
})
const remove = (file) => {
	// 只有移动端上线并且是老数据的时候才拦截
	if (props.isup && file.url && file.url.includes('http')) {
		message.warning('不能删除原始附件')
		return false
	}
}

// 自定义上传
const customRequest = (file) => {
	// 后端需要接受的参数是 formData数据，
	const form = new FormData()
	form.append('file', file.file)
	fileApi.fileUploadAliyunReturnUrl(form).then((res) => {
		file.onSuccess(res, file.file)
		file.status = 'done'
	})
}
// 应用商店自定义上传（不带权限）
const customRequestStroe = (file) => {
	// 后端需要接受的参数是 formData数据，
	const form = new FormData()
	form.append('file', file.file)
	fileApi.uploadCosReturnUrlPub(form).then((res) => {
		file.onSuccess(res, file.file)
		file.status = 'done'
	})
}
// 表单验证
const handleValidate = () => {
	// return new Promise((resolve, reject) => {
	// 	formRef.value
	// 		.validate()
	// 		.then(() => {
	// 			console.log('成功')
	// 			resolve(formData)
	// 		})
	// 		.catch(() => {
	// 			console.log('失败')
	// 			resolve(false)
	// 		})
	// })
	return formData
}

defineExpose({
	handleValidate
})
</script>

<style lang="less" scoped>
.tit {
	color: rgb(40, 40, 40);
	font-family: PingFang SC;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0px;
	text-align: left;
}

.form-box {
	margin-top: 14px;
	padding: 0 18px;

	&-inp {
		border-radius: 4px;
		border: 1px solid rgb(206, 206, 206);
	}

	.labelCla {
		color: rgb(40, 40, 40);
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 600;
		line-height: 28px;
		letter-spacing: 0px;
		text-align: left;
		padding: 0 0 8px;
	}

	.font {
		color: rgb(150, 150, 150);
		font-size: 12px;
		line-height: 20px;
		margin-top: 6px;
	}

	.uploadBtn {
		width: 104px;
		height: 104px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fafafa;
		border: 1px dashed #d9d9d9;
		border-radius: 2px;
		cursor: pointer;
		transition: border-color 0.3s ease;
	}

	.tit1 {
		color: rgb(89, 89, 89);
		font-size: 12px;
	}

	.tit2 {
		color: rgb(150, 150, 150);
		font-size: 12px;
	}
}
.labelClas {
	color: rgb(40, 40, 40);
	font-family: PingFang SC;
	font-size: 16px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0px;
	text-align: left;
	padding: 0 0 8px;
}
.labelClas::before {
	display: inline-block;
	margin-right: 4px;
	color: var(--highlight-color);
	font-size: 14px;
	font-family: SimSun, sans-serif;
	line-height: 1;
	content: '*';
}

.uploadBtn:hover {
	border-color: var(--primary-color);
}
</style>
<style>
.ant-upload-select-picture-card i {
	font-size: 32px;
	color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
	margin-top: 8px;
	color: #666;
}
</style>
<style scoped>
/* tile uploaded pictures */
.upload-list-inline :deep(.ant-upload-list-item) {
	float: left;
	width: 182px;
	margin-right: 8px;
}

.upload-list-inline :deep(.ant-upload-animate-enter) {
	animation-name: uploadAnimateInlineIn;
}

.upload-list-inline :deep(.ant-upload-animate-leave) {
	animation-name: uploadAnimateInlineOut;
}
</style>
